<template>
  <div class="wrap userinfo">
    <div class="title">
      <div>我的賬戶</div>
      <div></div>
      <div>個人資料</div>
    </div>
    <div class="content">
      <el-form :model="user" :rules="rules" ref="userFrom" class="item" label-width="200px">
        <el-form-item label="我的QR Code：">
          <vue-qr :text="'http://www.hometasty.hk/#/regist?hui='+user.inviteCode" :size="200" :margin="0"></vue-qr>
          <div>掃描QR Code即成推薦人</div>
        </el-form-item>
        <el-form-item label="會員賬號(即邀請碼)：">
          <span>{{user.inviteCode}}</span>
        </el-form-item>
         <!-- <el-form-item :inline="true" label="Surname：" prop="surname">
              <el-input v-model="user.surname" placeholder="請輸入姓"></el-input>
          </el-form-item> -->
        <el-form-item label="會員等級：">
          <span>{{userLevel1[user.userLevel-1]}}</span>
        </el-form-item>
        <el-form-item label="個人pv：">
          <span>{{user.pvTotal}}</span>
        </el-form-item>
        <el-form-item label="本月PV：">
          <span>{{user.pvOfMouth}}</span>
        </el-form-item>
        <el-form-item label="累計PV：">
          <div class="leiji">
            <div>{{user.pvTotal}}</div>
            <div> 
              <!-- <div v-if="user.userLevel >= 2" @click="gotoPV">查看PV詳情</div> -->
              <div style="cursor:default" v-if="user.ustatus == 0">申請中</div>
              <div v-if="user.ustatus != 0 && user.userLevel <= 1 && user.pvTotal >= 5000" @click="sheng(user.pvTotal)">升級成為經銷商</div>
              
              <!-- <div v-if="user.ustatus != 0 && user.userLevel == 2" @click="shengother('副總監')">升級成為副總監</div>
              <div v-if="user.ustatus != 0 && user.userLevel == 3" @click="shengother('總監')">升級成為總監</div>
              <div v-if="user.ustatus != 0 && user.userLevel == 4" @click="shengother('區域總監')">升級成為區域總監</div>
              <div v-if="user.ustatus != 0 && user.userLevel == 5" @click="shengother('高級區域總監')">升級成為高級區域總監</div>
              <div v-if="user.ustatus != 0 && user.userLevel == 6" @click="shengother('亞洲總監')">升級成為亞洲總監</div>
              <div v-if="user.ustatus != 0 && user.userLevel == 7" @click="shengother('亞太區總監')">升級成為亞太區總監</div>
              <div v-if="user.ustatus != 0 && user.userLevel == 8" @click="shengother('環球總監')">升級成為環球總監</div> -->
            </div>             
          </div>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item :inline="true" label="Surname：" prop="surname">
              <el-input v-model="user.surname" placeholder="請輸入姓"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :inline="true" label="Name：" prop="username">
              <el-input v-model="user.username" placeholder="請輸入名"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="推薦人：">
          <span v-if=" user.parentUser!= null && user.parentUser != '' && user.parentUser !=undefined">{{user.parentUser}}</span>
          <el-input v-else v-model="parentUser" placeholder="請輸入推薦人的邀請碼"></el-input>
        </el-form-item>
        <el-form-item label="性別：">
          <el-radio-group v-model="user.gender">
            <el-radio :label="2" >女</el-radio>
            <el-radio :label="1">男</el-radio>
          </el-radio-group>
        </el-form-item> 
        <el-form-item label="出生日期：">
          <el-date-picker
            v-model="user.birthday"
            type="date"
            placeholder="選擇日期"
            format="MM-dd"
            value-format="yyyy-MM-dd"
            @change='checkdata()'
            :clearable='false'>
          </el-date-picker>
        </el-form-item>
        <!-- <el-row>
          <el-col :span="12">
            <el-form-item :inline="true" label="出生月日：" prop="birthmonth">
              <el-input v-model="user.birthmonth" placeholder="請輸入月份" type="number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :inline="true" label="" prop="birthday">
              <el-input v-model="user.birthday" placeholder="請輸入日期" type="number"></el-input>
            </el-form-item>
          </el-col>
        </el-row>    -->
        <el-form-item label="郵箱：" prop="email">
          <el-input v-model="user.email" placeholder="請輸入郵箱地址"></el-input>
        </el-form-item>
        <el-form-item label="">
            <el-checkbox  v-model="acceptIs"  @change='isaccept'>同意接收推廣信息和會員資訊</el-checkbox>
        </el-form-item>
        <el-form-item>
          <div @click="onSubmit('userFrom')" class="savebtn">保存</div>
          <!-- <el-button type="primary" @click="onSubmit('userFrom')">提交</el-button> -->
        </el-form-item>
      </el-form>
      
    </div>
  </div>
</template>
<script>
import {findOrders,getMonthPv} from '@/api/pv'
import {validatePhoneTwo,validateEMail,validatePassword,validateReferral,validateXing,validateMonth,validateDay} from '@/utils/validate';
import {userInfo,updateUserInfo,upgrade,fetchList2} from '@/api/user';
// import {getAdmin} from '@/utils/auth';
import { getToken,removeToken } from '@/utils/auth' // 驗權
import vueQr from "vue-qr"
const defaultUser = {
  username: "",//名
  email: "",
  surname:'',//姓
  // birthmonth:null,//月
  birthday:'',//日
  gender:''
};
export default {
   components: {
    vueQr
  },
  data(){
    return{
      value:'',
      userLevel1:  ['普通会员', '經銷商', '副總監', '總監', '区域總監','高级区域總監', '亞洲總監', '亞太區總監', '環球總監'],
      imageUrl: '',
      // user: Object.assign({}, defaultUser),
      user:{},
      rules: {
        username:[{required: true, message: '請輸入名', trigger: 'blur'}],
        surname:[{required:true,message:'請輸入姓',trigger:'blur'}],
        email:[{message: '請輸入郵箱', trigger:'blur'}],
        birthmonth:[{required:true,message:'請輸入月',trigger: 'blur'},{validator: validateMonth, trigger: 'blur' }],
        birthday:[{required:true,message:'請選擇日期',trigger:'blur'}],
      },
      acceptIs:true,//接受推廣 1接受 0不接受
      parentUser:''
    }
  },
  mounted(){
    this.getuser()
  },
  methods: {
    gotoPV(){
      this.$router.push({path:'/pvDetails'})
    },
    checkdata(){
     
    },
    sheng(e){
      if(e >= 5000){
        this.$router.push({
          path:'/distributor'
        })
      }
    },
    shengother(num){
      this.$confirm('是否升級成為'+num+', 是否繼續?', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        upgrade({userId:getToken()}).then(response => {
          if(response.errno == 0){
            this.$message({
              type:'success',
              message:response.errmsg
            })
            this.getuser()
          }else{
            this.$message({
              type:'error',
              message:response.errmsg
            })
          }
        })
      }).catch(() => {

      });
    },
    getuser(){
      userInfo({userId:getToken()}).then(response => {
        if(response.errno == 0){
          this.user = response.data
          this.user.acceptIs == 1?this.acceptIs = true:this.acceptIs = false
          findOrders({userId:getToken(),limit:999,page:1}).then(response3 => {
                if(response3.errno == 0){
                    let pvTotal=0
                    for (let index = 0; index < response3.data.list.length; index++) {
                        const element = response3.data.list[index];
                        pvTotal+=element.orderPv
                    }
                    this.$set(this.user,'pvTotal',pvTotal)
                    this.$set(this.user,'pvOne',pvTotal)
                    
                }
            })
            getMonthPv({user_id:getToken()}).then(response3 => {
                       this.$set(this.user,'pvOfMouth',response3.monthPv)
                })
          // fetchList2({id:getToken()}).then(response2 => {
          //   if(response2.errno == 0){
          //     this.$set(this.user,'pvOfMouth',response2.data.list[0].monthPv)
          //     this.$set(this.user,'postname',postname)
          //   }else{
          //     this.$message({
          //       type:'error',
          //       message:response.errmsg
          //     })
          //   }
          // })

        }else{
          this.$message({
            type:'error',
            message:response.errmsg
          })
        }
      })
      
    },
    isaccept(data){
      console.log(data)
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.acceptIs?this.user.acceptIs = 1:this.user.acceptIs = 0
          this.user.birthday == null?this.user.birthday = '':this.user.birthday
          this.user.userId = getToken()
          this.user.inviteCode = this.parentUser
          updateUserInfo(this.user).then(response => {
            if(response.errno == 0){
              this.$message({
                type:'success',
                message:'修改成功',
              })
              this.getuser()
            }else{
              this.$message({
                type:'error',
                message:response.errmsg
              })
            }
          })
        }else{
          this.$message({
            message: '表單驗證失敗，請修改後重新提交',
              type: 'error',
              duration:1000
          });
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.user = Object.assign({},defaultUser);
    }
  }
}
</script>
<style >
  .userinfo .el-form-item{
    margin-bottom: 3px!important;
  }
</style>
<style scoped>
  .wrap{
    width: 100%;
    /* height: 1358px; */
    background: #FFFFFF;
    box-sizing: border-box;
    padding: 15px;
  }
  .title{
    width: 100%;
    box-sizing: border-box;
    padding: 10px 20px 20px 20px;
    border-bottom: 1px solid #F5F5F5;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .title>div:nth-child(1){
    font-size: 19px;
    font-weight: bold;
    color: #333333;
    border-bottom: 3px solid #333333;
  }
  .title>div:nth-child(2){
    width: 8px;
    height: 2px;
    background: #333333;
    margin: 0px 10px;
  }
  .title>div:nth-child(3){
    font-size: 19px;
    font-weight: bold;
    color: #333333;
    border-bottom: 3px solid #333333;
  }
  .content{
    width: 80%;
    margin: 0px auto;
  }
  .ercode{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
  }
  .ercode>img{
    width: 202px;
    height: 202px;
    object-fit: cover;
  }
  .content>>>.el-checkbox__inner:hover{
    border-color: #E5E5E5;
  }
  .content>>>.el-checkbox__inner.is-focus,.content>>>.el-checkbox__inner{
    background: #E5E5E5;
    border-color: #E5E5E5;
  }
  /* 多選選中 */
  .content>>>.el-checkbox__inner::after{
    border-color: #FF4400;
  }
  /* 不全選 */
  .content>>>.el-checkbox__input.is-indeterminate .el-checkbox__inner::before{
    background: #FF4400;
  }
  .content>>>.el-checkbox__input.is-checked .el-checkbox__inner, .content>>>.el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background: #E5E5E5;
    border-color: #E5E5E5;
  }
  .content>>>.el-checkbox__input.is-checked+.el-checkbox__label{
    color: #606266;
  }
  .leiji{
    display: flex;
    align-items: center;
    box-sizing: border-box;
    justify-content: space-between;
  }
  .leiji>div:nth-child(2){
    display: flex;
    align-items: center;
    box-sizing: border-box;
    cursor: pointer;
  }
  .leiji>div:nth-child(2)>div:nth-child(1){
    width: 174px;
    height: 50px;
    border: 1px solid #000000;
    border-radius: 25px;
    font-size: 19px;
    font-weight: 400;
    color: #333333;
    text-align: center;
    line-height: 50px;
    margin-right: 10px;
  }
  .leiji>div:nth-child(2)>div:nth-child(2){
    width: 174px;
    height: 50px;
    border: 1px solid #000000;
    border-radius: 25px;
    font-size: 19px;
    font-weight: 400;
    color: #333333;
    text-align: center;
    line-height: 50px;
  }
  .savebtn{
    width: 364px;
    height: 66px;
    background: #BE9A67;
    font-size: 19px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 66px;
    text-align: center;
    cursor: pointer;
  }
  .content>>>.el-radio__input.is-checked+.el-radio__label{
    color:#BE9A67;
  }
  .content>>>.el-radio__input.is-checked .el-radio__inner{
    border-color: #BE9A67;
    background: #BE9A67;
  }
  .content>>>.el-radio__inner:hover{
    border-color: #BE9A67;
  }
  /* .item>>>.el-form-item__label{
    width: 150px;
    white-space: nowrap;
  } */
  /* @page{
    margin-bottom: 0;
    size:auto;
  } */
</style>